<template>
  <div class="matching-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>智能匹配系统</h1>
      <p>告诉我们您的健身目标和偏好，我们将为您推荐最合适的私教</p>
    </div>

    <!-- 匹配表单 -->
    <div class="matching-form" v-if="!showResults">
      <div class="form-section">
        <h3>健身目标</h3>
        <div class="goal-options">
          <label v-for="goal in fitnessGoals" :key="goal.value" class="goal-option">
            <input type="radio" v-model="userPreferences.goal" :value="goal.value">
            <div class="goal-card">
              <i :class="goal.icon"></i>
              <span>{{ goal.label }}</span>
            </div>
          </label>
        </div>
      </div>

      <div class="form-section">
        <h3>预算范围</h3>
        <div class="budget-slider">
          <input type="range" v-model="userPreferences.budget" min="100" max="1000" step="50">
          <div class="budget-display">
            <span>¥{{ userPreferences.budget }}/课时</span>
          </div>
        </div>
      </div>

      <div class="form-section">
        <h3>地理位置</h3>
        <select v-model="userPreferences.location" class="location-select">
          <option value="">选择城市</option>
          <option v-for="city in cities" :key="city" :value="city">{{ city }}</option>
        </select>
      </div>

      <div class="form-section">
        <h3>训练偏好</h3>
        <div class="preference-grid">
          <label v-for="pref in trainingPreferences" :key="pref.value" class="preference-item">
            <input type="checkbox" v-model="userPreferences.preferences" :value="pref.value">
            <span>{{ pref.label }}</span>
          </label>
        </div>
      </div>

      <div class="form-section">
        <h3>训练经验</h3>
        <div class="experience-options">
          <label v-for="exp in experienceLevels" :key="exp.value" class="experience-option">
            <input type="radio" v-model="userPreferences.experience" :value="exp.value">
            <span>{{ exp.label }}</span>
          </label>
        </div>
      </div>

      <button @click="findMatches" class="match-button" :disabled="!isFormValid">
        开始匹配
      </button>
    </div>

    <!-- 匹配结果 -->
    <div class="matching-results" v-if="showResults">
      <div class="results-header">
        <h2>为您推荐的私教</h2>
        <p>基于您的偏好，我们找到了 {{ matchedTrainers.length }} 位高度匹配的私教</p>
        <button @click="resetForm" class="reset-button">重新匹配</button>
      </div>

      <div class="trainer-recommendations">
        <div v-for="(trainer, index) in matchedTrainers" :key="trainer.id" class="recommendation-card">
          <div class="match-badge">
            <span>{{ trainer.matchScore }}% 匹配</span>
          </div>
          
          <div class="trainer-info">
            <img :src="trainer.avatar" :alt="trainer.name" class="trainer-avatar">
            <div class="trainer-details">
              <h3>{{ trainer.name }}</h3>
              <div class="trainer-meta">
                <span class="rating">
                  <i class="star-icon">⭐</i>
                  {{ trainer.rating }}
                </span>
                <span class="experience">{{ trainer.experience }}年经验</span>
                <span class="location">{{ trainer.location }}</span>
              </div>
              <div class="specialties">
                <span v-for="specialty in trainer.specialties" :key="specialty" class="specialty-tag">
                  {{ specialty }}
                </span>
              </div>
              <p class="trainer-intro">{{ trainer.introduction }}</p>
            </div>
          </div>

          <div class="match-reasons">
            <h4>推荐理由：</h4>
            <ul>
              <li v-for="reason in trainer.matchReasons" :key="reason">{{ reason }}</li>
            </ul>
          </div>

          <div class="trainer-actions">
            <span class="price">¥{{ trainer.price }}/课时</span>
            <button @click="viewTrainer(trainer.id)" class="view-profile-btn">查看详情</button>
            <button @click="bookTrainer(trainer.id)" class="book-btn">立即预约</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MatchingView',
  data() {
    return {
      showResults: false,
      userPreferences: {
        goal: '',
        budget: 300,
        location: '',
        preferences: [],
        experience: ''
      },
      fitnessGoals: [
        { value: 'weight-loss', label: '减脂塑形', icon: 'goal-icon weight-loss' },
        { value: 'muscle-gain', label: '增肌增重', icon: 'goal-icon muscle-gain' },
        { value: 'strength', label: '力量训练', icon: 'goal-icon strength' },
        { value: 'rehabilitation', label: '康复训练', icon: 'goal-icon rehabilitation' },
        { value: 'general-fitness', label: '综合健身', icon: 'goal-icon general' }
      ],
      cities: ['北京', '上海', '广州', '深圳', '杭州', '成都', '武汉', '西安'],
      trainingPreferences: [
        { value: 'morning', label: '早晨训练' },
        { value: 'evening', label: '晚间训练' },
        { value: 'weekend', label: '周末训练' },
        { value: 'high-intensity', label: '高强度训练' },
        { value: 'gentle', label: '温和训练' },
        { value: 'group', label: '小组训练' }
      ],
      experienceLevels: [
        { value: 'beginner', label: '初学者' },
        { value: 'intermediate', label: '中级' },
        { value: 'advanced', label: '高级' }
      ],
      matchedTrainers: []
    }
  },
  computed: {
    isFormValid() {
      return this.userPreferences.goal && 
             this.userPreferences.location && 
             this.userPreferences.experience;
    }
  },
  methods: {
    findMatches() {
      // 模拟匹配算法
      this.matchedTrainers = this.generateMatchedTrainers();
      this.showResults = true;
    },
    
    generateMatchedTrainers() {
      // 模拟数据 - 实际应用中这里会调用后端API
      const mockTrainers = [
        {
          id: 1,
          name: '张健',
          avatar: 'https://via.placeholder.com/80x80',
          rating: 4.9,
          experience: 5,
          location: this.userPreferences.location,
          specialties: ['减脂塑形', '功能性训练'],
          introduction: '专注于科学减脂和体态矫正，帮助学员建立健康的生活方式。',
          price: 280,
          matchScore: 95,
          matchReasons: [
            '专业领域与您的健身目标高度匹配',
            '价格在您的预算范围内',
            '地理位置便利',
            '训练风格符合您的偏好'
          ]
        },
        {
          id: 2,
          name: '李美',
          avatar: 'https://via.placeholder.com/80x80',
          rating: 4.8,
          experience: 3,
          location: this.userPreferences.location,
          specialties: ['瑜伽', '普拉提', '体态矫正'],
          introduction: '温和而有效的训练方式，注重身心平衡和柔韧性提升。',
          price: 250,
          matchScore: 88,
          matchReasons: [
            '训练方式温和，适合初学者',
            '价格优惠',
            '专注于体态改善',
            '用户评价优秀'
          ]
        },
        {
          id: 3,
          name: '王强',
          avatar: 'https://via.placeholder.com/80x80',
          rating: 4.7,
          experience: 7,
          location: this.userPreferences.location,
          specialties: ['力量训练', '增肌', '运动营养'],
          introduction: '资深力量训练专家，擅长制定个性化增肌计划和营养指导。',
          price: 350,
          matchScore: 82,
          matchReasons: [
            '经验丰富，专业度高',
            '力量训练专家',
            '提供营养指导',
            '训练效果显著'
          ]
        }
      ];

      // 根据用户偏好调整匹配分数
      return mockTrainers.map(trainer => {
        let adjustedScore = trainer.matchScore;
        
        // 根据预算调整分数
        if (trainer.price <= this.userPreferences.budget) {
          adjustedScore += 5;
        } else {
          adjustedScore -= 10;
        }
        
        return {
          ...trainer,
          matchScore: Math.min(adjustedScore, 99)
        };
      }).sort((a, b) => b.matchScore - a.matchScore);
    },
    
    resetForm() {
      this.showResults = false;
      this.userPreferences = {
        goal: '',
        budget: 300,
        location: '',
        preferences: [],
        experience: ''
      };
    },
    
    viewTrainer(trainerId) {
      this.$router.push(`/trainer/${trainerId}`);
    },
    
    bookTrainer(trainerId) {
      this.$router.push(`/booking?trainer=${trainerId}`);
    }
  }
}
</script>

<style scoped>
.matching-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-header h1 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.page-header p {
  color: #7f8c8d;
  font-size: 16px;
}

.matching-form {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.form-section {
  margin-bottom: 30px;
}

.form-section h3 {
  color: #2c3e50;
  margin-bottom: 15px;
  font-size: 18px;
}

.goal-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.goal-option input {
  display: none;
}

.goal-card {
  padding: 20px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.goal-card:hover {
  border-color: #3498db;
  background-color: #f8f9fa;
}

.goal-option input:checked + .goal-card {
  border-color: #3498db;
  background-color: #e3f2fd;
}

.goal-icon {
  font-size: 24px;
  margin-bottom: 10px;
  display: block;
}

.budget-slider {
  text-align: center;
}

.budget-slider input[type="range"] {
  width: 100%;
  margin-bottom: 10px;
}

.budget-display {
  font-size: 18px;
  font-weight: bold;
  color: #3498db;
}

.location-select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 16px;
}

.preference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.preference-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.experience-options {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.experience-option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.match-button {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.match-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.match-button:disabled {
  background: #bdc3c7;
  cursor: not-allowed;
}

.matching-results {
  margin-top: 40px;
}

.results-header {
  text-align: center;
  margin-bottom: 30px;
}

.results-header h2 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.reset-button {
  padding: 10px 20px;
  background: #95a5a6;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 15px;
}

.trainer-recommendations {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.recommendation-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
}

.match-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: linear-gradient(135deg, #27ae60, #2ecc71);
  color: white;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: bold;
}

.trainer-info {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.trainer-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.trainer-details {
  flex: 1;
}

.trainer-details h3 {
  color: #2c3e50;
  margin-bottom: 8px;
}

.trainer-meta {
  display: flex;
  gap: 15px;
  margin-bottom: 10px;
  font-size: 14px;
  color: #7f8c8d;
}

.rating {
  display: flex;
  align-items: center;
  gap: 4px;
}

.specialties {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.specialty-tag {
  background: #e3f2fd;
  color: #1976d2;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.trainer-intro {
  color: #555;
  line-height: 1.5;
}

.match-reasons {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.match-reasons h4 {
  color: #2c3e50;
  margin-bottom: 10px;
  font-size: 16px;
}

.match-reasons ul {
  margin: 0;
  padding-left: 20px;
}

.match-reasons li {
  color: #555;
  margin-bottom: 5px;
}

.trainer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.price {
  font-size: 18px;
  font-weight: bold;
  color: #e74c3c;
}

.view-profile-btn, .book-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
}

.view-profile-btn {
  background: #ecf0f1;
  color: #2c3e50;
}

.view-profile-btn:hover {
  background: #d5dbdb;
}

.book-btn {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: white;
}

.book-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
}

@media (max-width: 768px) {
  .matching-container {
    padding: 15px;
  }
  
  .goal-options {
    grid-template-columns: 1fr;
  }
  
  .preference-grid {
    grid-template-columns: 1fr;
  }
  
  .experience-options {
    flex-direction: column;
  }
  
  .trainer-info {
    flex-direction: column;
    text-align: center;
  }
  
  .trainer-actions {
    flex-direction: column;
    align-items: stretch;
  }
}
</style>